<template>
    <div>
        <h1>房号管理--列表</h1>
        
        <div>
            房型名称：
            <input type="text" v-model="queryInfo.typeName">
            <input type="button" value="查询" @click="getlist()">
            <input type="button" value="批量删除" @click="delAll()" class="btn btn-danger">
            <input type="button" value="批量上架" @click="upDown(1)" class="btn btn-success">
            <input type="button" value="批量下架" @click="upDown(0)" class="btn btn-warning">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="gocheckall">全选</td>
                    <td>房号名称</td>
                    <td>房型</td>
                    <td>房态</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>

                <tr v-for="item in data.list" :key="item.id">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="checkone"></td>
                    <td>{{ item.noName }}</td>
                    <td>
                        <span v-if="item.houseTypeId==1">总统套房</span>
                        <span v-if="item.houseTypeId==2">商务型</span>
                        <span v-if="item.houseTypeId==3">双床房</span>
                        <span v-if="item.houseTypeId==4">大床房</span>
                    </td>
                    <td>
                        <span v-if="item.houseTypeId==1">空闲</span>
                        <span v-if="item.houseTypeId==2">已预约</span>
                        <span v-if="item.houseTypeId==3">已入住</span>
                    </td>
                    <td>{{item.state==1?"上架":"下架"}}</td>
                    <td>
                        <input type="button" value="修改" class="btn btn-primary" @click="upd(item.id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="del(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
        <div>
            共{{data.totalCount}}条数据，当前第{{queryInfo.pageIndex}}页，共{{data.totalPage}}页
            <input type="button" value="首页" @click="gopage('a')">
            <input type="button" value="上一页" @click="gopage('b')">
            <input type="button" value="下一页" @click="gopage('c')">
            <input type="button" value="尾页" @click="gopage('d')">
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import axios from 'axios';
const router = useRouter()
const route = useRoute()


let ids = ref([]);

let checkAll = ref(false);

const gocheckall = () => {
    checkAll.value = !checkAll.value;
    if (checkAll.value) {
        ids.value = data.list.map((item: any) => {
            return item.id
        })
    } else {
        ids.value = [];
    }
}

const checkone = () => {
    if(ids.value.length =data.list.value.length){
        checkAll.value = true;
    }else{
        checkAll.value = false;
    }
}



onMounted(() => {
    getlist();
})

let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})

let queryInfo = reactive({
    typeName:'',
    pageIndex:1,
    pageSize:2
})

const getlist = () => {
    axios({
        url:'/api/HouseNo/GetHouseNos',
        method:'get',
        params:queryInfo
    })
    .then((res) => {
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err) => {
        console.log(err);
    })
}


const gopage = (str:string) => {
    switch(str){
        case 'a':
            queryInfo.pageIndex = 1;
            break;
        case 'b':
            if(queryInfo.pageIndex > 1){
                queryInfo.pageIndex--;
            }
            break;
        case 'c':
            if(queryInfo.pageIndex < data.totalPage){
                queryInfo.pageIndex++;
            }
            break;
        case 'd':
            queryInfo.pageIndex = data.totalPage;
            break;
    }
    getlist();
}

const del = (id:any) => {
    var f = confirm('确定要删除吗？');
    if(f){
        axios({
            url:'/api/HouseType/DelHouseType',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res) => {
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getlist();
            }
        })
        .catch((err) => {
            console.log(err);
            alert('删除失败');
            return;
        })
    }
}

const upd = (id:any) => {
    router.push({
        path:'/housetypeupd',
        query:{
            id:id
        }
    })
}

const delAll = () => {
    var f = confirm('确定要删除吗？');
    if(f){
        axios({
            url:'/api/HouseNo/DelALLHouseNos',
            method:'delete',
            params:{
                ids:ids.value.toString()
            }
        })
        .then((res) => {
            console.log(res);
            if(res.data>0){
                alert('删除成功');
                getlist();
            }
        })
        .catch((err) => {
            console.log(err);
            alert('删除失败');
            return;
        })
    }
}


const upDown = (state:any) => {
    axios({
        url:'/api/HouseNo/UpdALLHouseNo',
        method:'put',
        params:{
            ids:ids.value.toString(),
            state:state
        }
    })
    .then((res) => {
        console.log(res);
        if(res.data>0){
            alert('修改成功');
            getlist();
        }
    })
    .catch((err) => {
        console.log(err);
        alert('修改失败');
        return;
    })
}



</script>

<style scoped>
h1{
    text-align: center;
}
</style>